<template>
  <div>
      <header>
        <div>
            <input type="button" value="">
            <input type="text" placeholder="按内容搜索">
        </div>
    </header>
    <ul class="nav">
        <li>
            综合推荐
            <span></span>
        </li>
        <li>
            销量
            <span></span>
        </li>
        <li>
            价格
            <img src="../../../assets/img/img/商品列表 (1).png" alt="">
            <span></span>
        </li>
        <li>
            好评度
            <span></span>
        </li>
        <li>
            店铺
            <span></span>
        </li>
        <li>
            <img src="../../../assets/img/img/商品列表 (2).png" alt="">
            筛选
        </li>
    </ul>
    <div class="content1">
        <input type="button" value="筛选11.11大促商品">
    </div>
    <div class="content2">
        <div v-for="item in arr" :key="item.id" @click="godetail(item.id)">
            <img :src="$pre+item.img" alt="">
            <ul>
                <li>{{item.goodsname}}</li>
                <li></li>
                <li>
                    <span>￥{{item.price}}</span>
                    <span>￥{{item.market_price}}</span>
                </li>
            </ul>
        </div>
    </div>
  </div>
</template>

<script>
import {reqList} from "../../../http/api.js"
export default {
  data(){
    return{
      obj:{cateid:this.$route.query.id,type:2},
      arr:[]
    }
  },
  mounted(){
    reqList(this.obj).then(res=>{
      // console.log(res.data.list);
      
      this.arr=res.data.list.goodData
      
    })
  },
  methods:{
    godetail(id){
      this.$router.push('/foodDetail?id='+id)
    }

  }
}
</script>

<style scoped>
header {
  height: 1.14rem;
  background: linear-gradient(to bottom, #FF6040, #FF7A68);
  display: flex;
  justify-content: center;
  align-items: center;
}
header div {
  width: 7.1rem;
  height: 0.64rem;
  background: white;
  border-radius: 0.1rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
header div input:nth-of-type(1) {
  /* background: url("../img/index/index\ \(6\).png") no-repeat center center; */
  height: 0.64rem;
  width: 0.6rem;
  background-size: 0.32rem 0.32rem;
  border-radius: 4px;
}
.nav {
  font-size: 0.26rem;
  height: 0.56rem;
  color: white;
  background: linear-gradient(to bottom, #FF7A68, #FF8A7F);
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  line-height: 0.51rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0px 4px 4px #FFD7D0;
}
.nav li:hover span {
  width: 0.4rem;
  height: 0.05rem;
  border-radius: 1px;
  background: white;
  display: block;
  margin: 0 auto;
}
.nav li:hover {
  font-weight: bolder;
  font-size: 0.3rem;
}
.nav li:nth-of-type(3) img {
  width: 0.13rem;
  height: 0.26rem;
  float: right;
  margin: 6px 0 0 6px;
}
.nav li:nth-of-type(6) {
  box-shadow: -5px 0 8px #F56557;
  line-height: 0.56rem;
  display: flex;
}
.nav li:nth-of-type(6) img {
  width: 0.24rem;
  height: 0.26rem;
  margin: 8px 8px 0;
}
.content1 {
  width: 7.1rem;
  height: 0.65rem;
  margin: 0.2rem auto 0;
}
.content1 input {
  width: 7.1rem;
  height: 0.65rem;
  background: #FFF4F2;
  color: #FF775B;
  border: 1px solid #FF775B;
  font-size: 0.3rem;
  font-weight: bolder;
}
.content2 {
  width: 7.1rem;
  margin: 0 auto;
  height: 12.13rem;
  overflow: hidden;
}
.content2 div {
  display: flex;
  justify-content: flex-start;
  margin: 0.4rem auto 0;
}
.content2 div img {
  width: 2.16rem;
  height: 2.18rem;
  margin-right: 0.4rem;
}
.content2 div li:nth-of-type(1) {
  font-size: 0.3rem;
  font-weight: bolder;
  line-height: 1.4rem;
}
.content2 div span:nth-of-type(1) {
  font-size: 0.3rem;
  font-weight: bolder;
  color: #FF775B;
}
.content2 div span:nth-of-type(2) {
  font-size: 0.12rem;
  color: gray;
  text-decoration: line-through;
}

</style>